<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Benchmark Results</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.14/vue.min.js"></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js'></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.5.1/math.min.js"></script>
    <style type="text/css">
html {
    position: relative;
    min-height: 100%;
}
body {
    font-family: 'Lato', sans-serif;
    font-size: 13.5px;
    margin-bottom: 3rem; /* Margin bottom by footer height */
}
div.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2.5rem; /* Set the fixed height of the footer here */
    line-height: 2.5rem; /* Vertically center the text there */

    padding-left: 1em;
    padding-right: 1em;
    color: #aaa;
    background-color: #eee;
    font-size: 13.5px;
}
div.footer .date {
    float: left;
}
div.footer .version {
    text-align: center;
}
div.footer .env {
    float: right;
}
#data-table {
    overflow-x: scroll;
}
th {
    font-size: 16px;
}
th.center, td.center {
    text-align: center;
}
th.dark, td.dark {
    background-color: #f8f8f8;
}
tr:hover td.dark {
    background-color: #e8e8e8;
}
tr.details {
    border-top: 1px solid #ddd;
    background-color: #eee;
}
span.title {
    font-size: 16px;
    font-weight: 300;
}
span.title.version {
    color: #aaa;
}
span.description {
    font-weight: bold;
}
.data {
    font-size: 12px;
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
}
.diff {
    color: #aaa;
}
td.details .btn {
    font-size: 10px;
    padding: 2px 4px 2px 4px;
}
td.title {
    white-space: nowrap;
}
td.numeric {
    text-align: right;
    padding-left: 1em;
    padding-right: 1em;
}
td.diff {
    font-size: 9pt; color: #c0c0c0;
}
td.clickable {
    cursor: pointer;
}
td.clickable .selection-icon {
    width: 1em;
}
td.clickable:hover .selection-icon::before {
    content: "\f00c";
}
td.clickable .selection-icon.selected::before {
    content: "\f14a";
}
td.WARM_UP {
    background-color: #fff8ee;
}
tr.baseline {
    background-color: #ffeedd;
}
tr.baseline td.dark {
    background-color: #f8e8d8;
}
tr.baseline:hover td {
    background-color: #f8e8d8;
}
tr.baseline:hover td.dark {
    background-color: #f0e0d0;
}
tr:hover td.WARM_UP {
    background-color: #ffe6d4;
}
td.MEASURE {
    background-color: #eeffee;
}
tr:hover td.MEASURE {
    background-color: #d8ffd8;
}
div.controls {
    font-size: 13.5px;
}
div.controls .btn {
    font-size: 1em;
    padding: .375em .75em;
}
.btn-separator:after {
    content: ' ';
    display: block;
    margin: 0 1em;
}
    </style>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-dark bg-dark">
        <div class="navbar-brand mb-0 h1">
            <span>{{ benchmarkResult.title || "Benchmark results" }}</span>
        </div>
        <div class="navbar-brand mb-0 h1">Gradle Profiler</div>
    </nav>
    <div class='container-fluid'>
        <div class='row mt-3'>
            <div class='col'>
                <canvas id='samples' style="width: 100%;"></canvas>
            </div>
        </div>
        <div class="form-row mt-2 controls ml-auto mr-auto">
            <div class="btn-group btn-group-toggle" data-toggle="buttons">
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <button class="btn btn-secondary" :class="{ active: !options.sorted }" @click="options.sorted = false">Historical</button>
                    <button class="btn btn-secondary" :class="{ active: options.sorted }" @click="options.sorted = true">Sorted</button>
                </div>
            </div>
            <template v-if="benchmarkResult.scenarios.length > 1 || benchmarkResult.scenarios[0].samples.length > 1">
                <div class="btn-separator"></div>
                <div class="btn-group">
                    <button class="btn btn-secondary" @click="toggleAll(true)">Select all</button>
                    <button class="btn btn-secondary" @click="toggleAll(false)">Clear all</button>
                </div>
                <div class="btn-separator"></div>
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                    <button class="btn btn-secondary" :class="{ active: options.showAll }" @click="options.showAll = true">Show all</button>
                    <button class="btn btn-secondary" :class="{ active: !options.showAll }" @click="options.showAll = false">Show selected only</button>
                </div>
            </template>
        </div>
        <div class="row mt-3">
            <div class='col' id="data-table">
                <table class='table table-sm table-hover'>
                    <thead>
                        <tr>
                            <th></th>
                            <th>Scenario</th>
                            <th class="center dark" v-if="benchmarkResult.scenarios.length > 1">Baseline</th>
                            <th class="center">Sample</th>
                            <th v-for="(operation, index) in operations" class="center" :class="{ dark: index %2 === 0 }">{{ operation.title }}</th>
                            <th :colspan="benchmarkResult.scenarios.map(scenario => scenario.iterations.length).max()">Iterations</th>
                        </tr>
                    </thead>
                    <tbody>
                        <template v-for="scenario in benchmarkResult.scenarios">
                            <template v-for="(sample, index) in scenario.samples.filter(sample => options.showAll || sample.selected)">
                                <tr :class="{ baseline: baseline === scenario }">
                                    <td class="details" v-if="index === 0" :rowspan="rowCount(scenario)">
                                        <button
                                            class="btn btn-light"
                                            @click="scenario.showDetails = !scenario.showDetails"
                                            :title="scenario.showDetails ? 'Hide details' : 'Show details'">
                                            <span class="fa">{{ scenario.showDetails ? "&#xf068;" : "&#xf067;" }}</span>
                                        </button>
                                    </td>
                                    <td class="title" v-if="index === 0" :rowspan="rowCount(scenario)">
                                        <span class="title">{{ scenario.definition.title }}</span>
                                        <span class="title version" v-if="multipleBuildToolsPresent">({{ scenario.definition.buildTool }})</span>
                                    </td>
                                    <template v-if="benchmarkResult.scenarios.length > 1">
                                        <td class="numeric data dark" v-if="baseline && baseline !== scenario" title="Confidence of difference to baseline">{{ uTest(scenario, baseline, sample) | percent }}</td>
                                        <td class="center title dark" v-else-if="index == 0" :rowspan="rowCount(scenario)" @click="baseline = baseline ? null : scenario">
                                            <input type="checkbox" :checked="baseline">
                                        </td>
                                    </template>
                                    <td class="clickable data" @click="select(sample)" :style="{ color: sample.color }">
                                        <span class="fa selection-icon" :class="{ selected: sample.selected }" :style="{ color: sample.color }"></span>
                                        <span>{{ sample.name }}</span>
                                    </td>
                                    <td v-for="(operation, index) in operations" class="numeric data" :class="{ dark: index %2 === 0 }">
                                        <div>{{ sample[operation.name] | numeric }}&nbsp;{{ sample.unit }}</div>
                                        <template v-if="baseline && baseline !== scenario && baseline.samples.some(it => it.name === sample.name)">
                                            <div class="diff">{{ sample[operation.name] - baseline.samples.find(it => it.name === sample.name)[operation.name] | diff }}&nbsp;{{ sample.unit }}</div>
                                            <div class="diff">{{ (sample[operation.name] / baseline.samples.find(it => it.name === sample.name)[operation.name]) - 1 | percentDiff }}</div>
                                        </template>
                                    </td>
                                    <template v-for="(iteration, index) in scenario.iterations">
                                        <td class="numeric data" :class="iteration.phase" :title="iteration.phase + ' #' + iteration.iteration">
                                            <span>{{ iteration.values[sample.name] | numeric }}&nbsp;{{ sample.unit }}</span>
                                            <template v-if="baseline && baseline !== scenario && baseline.samples.some(it => it.name === sample.name) && baseline.iterations[index]">
                                                <div class="diff">{{ iteration.values[sample.name] - baseline.iterations[index].values[sample.name] | diff }}&nbsp;{{ sample.unit }}</div>
                                                <div class="diff">{{ (iteration.values[sample.name] / baseline.iterations[index].values[sample.name]) - 1 | percentDiff }}</div>
                                            </template>
                                        </td>
                                    </template>
                                </tr>
                            </template>
                            <tr class="details" v-show="scenario.showDetails">
                                <td :colspan="scenario.iterations.length + 10">
                                    <ul>
                                        <li>
                                            <span class="description">Scenario name:</span>
                                            <span class="data">{{ scenario.definition.name }}</span>
                                        </li>
                                        <li>
                                            <span class="description">Build tool:</span>
                                            <span class="data">{{ scenario.definition.buildTool }}</span>
                                        </li>
                                        <template v-if="scenario.definition.action">
                                            <li>
                                                <span class="description">Action:</span>
                                                <span class="data">{{ scenario.definition.action }}</span>
                                            </li>
                                            <li>
                                                <span class="description">Cleanup:</span>
                                                <span class="data">{{ scenario.definition.cleanup }}</span>
                                            </li>
                                            <li>
                                                <span class="description">Mutators:</span>
                                                <span class="data" v-if="scenario.definition.mutators.length === 0">none</span>
                                                <ul v-else>
                                                    <li v-for="mutator in scenario.definition.mutators">
                                                        <span class="data">{{ mutator }}</span>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <span class="description">Run using:</span>
                                                <span class="data">{{ scenario.definition.invoker }}</span>
                                            </li>
                                            <li>
                                                <span class="description">Scan plugin:</span>
                                                <span class="data">{{ scenario.definition.usesScanPlugin ? "yes" : "no" }}</span>
                                            </li>
                                            <li>
                                                <span class="description">Gradle arguments:</span>
                                                <ul>
                                                    <li v-for="arg in scenario.definition.args">
                                                        <span class="data">{{ arg }}</span>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <span class="description">JVM arguments:</span>
                                                <ul>
                                                    <li v-for="arg in scenario.definition.jvmArgs">
                                                        <span class="data">{{ arg }}</span>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li>
                                                <span class="description">Gradle home:</span>
                                                <span class="data">{{ scenario.definition.gradleHome }}</span>
                                            </li>
                                            <li>
                                                <span class="description">Java home:</span>
                                                <span class="data">{{ scenario.definition.javaHome }}</span>
                                            </li>
                                        </template>
                                        <template v-else>
                                            <li>
                                                <span class="description">Tasks:</span>
                                                <span class="data">{{ scenario.definition.tasks }}</span>
                                            </li>
                                        </template>
                                        <li v-if="scenario.definition.systemProperties">
                                            <span class="description">System properties:</span>
                                            <ul>
                                                <li v-for="(value, key) in scenario.definition.systemProperties">
                                                    <span class="data">{{ key }} = {{ value }}</span>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="footer fixed-bottom">
        <div class="date">{{ new Date(Date.parse(benchmarkResult.date)) | date }}</div>
        <div class="env">{{ benchmarkResult.environment.operatingSystem }}</div>
        <div class="version">Gradle Profiler version {{ benchmarkResult.environment.profilerVersion }}</div>
    </div>
</div>
<script>
const benchmarkResult =
@@BENCHMARK_RESULT_JSON@@
;

@@SCRIPT@@

</script>
</body>
</html>
